<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.design.title')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-tabs v-model="tabsActive" type="border-card" class="design-tabs">
      <el-tab-pane
        label="数据库表"
        icon="material-symbols:database-outline"
        name="dbTable"
        style="height: 100%"
      >
        <template #label>
          <span style="color: rgb(231 102 9)">
            <Icon icon="material-symbols:database-outline" />
            <span>数据库表管理</span>
          </span>
        </template>
        <DbTableDesign v-model="appName" />
      </el-tab-pane>
      <el-tab-pane label="SQL管理" name="sql" style="height: 100%">
        <template #label>
          <span style="color: #e7d409">
            <Icon icon="ph:file-sql" />
            <span>SQL管理</span>
          </span>
        </template>
        <SqlDesign v-model="appName" />
      </el-tab-pane>
      <el-tab-pane label="服务接口" name="services" style="height: 100%">
        <template #label>
          <span style="color: #0994e7">
            <Icon icon="ic:outline-miscellaneous-services" />
            <span>服务接口</span>
          </span>
        </template>
        <ServiceDesign v-model="appName" />
      </el-tab-pane>
      <el-tab-pane label="请求接口" name="requests" style="height: 100%">
        <template #label>
          <span style="color: #e77109">
            <Icon icon="material-symbols:http" />
            <span>请求接口</span>
          </span>
        </template>
        <HttRequestDesign v-model="appName" />
      </el-tab-pane>
      <el-tab-pane label="表单设计" name="formDesign" style="height: 100%">
        <template #label>
          <span style="color: rgb(9 231 204)">
            <Icon icon="clarity:form-line" />
            <span>表单设计</span>
          </span>
        </template>
        <FormDesign v-model="appName" />
      </el-tab-pane>
      <el-tab-pane label="列表设计" name="tableDesign" style="height: 100%">
        <template #label>
          <span style="color: rgb(102 231 9)">
            <Icon icon="material-symbols:table-rows-narrow-outline-sharp" />
            <span>列表设计</span>
          </span>
        </template>
        <ListDesign v-model="appName" />
      </el-tab-pane>
      <el-tab-pane label="页面设计" name="pageDesign" style="height: 100%">
        <template #label>
          <span style="color: rgb(9 144 231)">
            <Icon icon="material-symbols:home" />
            <span>页面设计</span>
          </span>
        </template>
        <PageDesign v-model="appName" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'
import DbTableDesign from './design/DbTableDesign.vue'
import FormDesign from './design/FormDesign.vue'
import HttRequestDesign from './design/HttRequestDesign.vue'
import ListDesign from './design/ListDesign.vue'
import PageDesign from './design/PageDesign.vue'
import ServiceDesign from './design/ServiceDesign.vue'
import SqlDesign from './design/SqlDesign.vue'

const { t } = useI18n()

const centerDialogVisible = ref(false)

const tabsActive = ref('dbTable')

const appName = ref()

const show = async (_appName: string) => {
  appName.value = _appName
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}
//暴露方法
defineExpose({ show, hide })
</script>

<style scoped>
.design-tabs {
  width: 100%;
}
:deep(.design-tabs .el-tabs__content) {
  height: calc(100% - 68px);
}
</style>
